<template>
  <div class="center">
    <div class="head">
      <div class="head-left">
        <dl style="display: flex" @click="taxon" id="dl">
          <dt class="head-left1">猫眼电影</dt>
          <div style="position: relative">
            <dd class="head-left2">正在热映</dd>
          </div>
          <div style="position: relative">
            <dd class="head-left2">即将上映</dd>
          </div>
        </dl>
      </div>
      <div class="head-right">全部 ></div>
    </div>
    <div class="body">
      <div id="div1">
        <ul>
          <li v-for="item in arrays" :key="item.alt">
            <div class="body-div">
              <img :src="item.title" />
              <div class="body-title">
                <div class="body-title-div">
                  <b>观众评价</b>
                  <span>9.1</span>
                </div>
                <div class="body-title-div2">
                  <div class="body-title-div2-div">{{ item.text }}</div>
                  <div class="body-title-div2-div2">购票</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="button-left">
          <a href="javascript:;">←</a>
        </div>
        <div class="button-right">
          <a href="javascript:;">→</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Video",
};
</script>

<script setup>
import { onMounted } from "vue";
const arrays = [
  {
    text: "扫黑行动",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd692923dddcf3e2ff7f1161a66a16042e.jpg?imageView2/1/w/160/h/220",
    alt: "扫黑行动电影海报",
  },
  {
    text: "哥，你好",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd651ecd2ff8ea3f2aa9ff5f49e1ff99b6.jpg?imageView2/1/w/160/h/220",
    alt: "哥，你好电影海报",
  },
  {
    text: "万里归途",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd6ddb53c7e5015d23c5bc24d876c03d41.jpg?imageView2/1/w/160/h/220",
    alt: "万里归途电影海报",
  },
  {
    text: "名侦探柯南：万圣节的新娘",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd692ddd7e13139313954ee2938728ad6a.jpg?imageView2/1/w/160/h/220",
    alt: "名侦探柯南：万圣节的新娘电影海报",
  },
  {
    text: "我的遗憾和你有关",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd69202f3393ba37e12a0b4797df31b7f4.jpg?imageView2/1/w/160/h/220",
    alt: "我的遗憾和你有关电影海报",
  },
  {
    text: "明日战记",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd6dd0300fa7a35f2aa050da82ba12c344.jpg?imageView2/1/w/160/h/220",
    alt: "明日战记电影海报",
  },
  {
    text: "新大头儿子和小头爸爸5：我的外星朋友",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd65187a923be12b8607870b84d901af50.jpg?imageView2/1/w/160/h/220",
    alt: "新大头儿子和小头爸爸5：我的外星朋友电影海报",
  },
  {
    text: "平凡英雄",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd6ddb53338925739ddde572ed1be162d4.jpg?imageView2/1/w/160/h/220",
    alt: "平凡英雄电影海报",
  },
  {
    text: "天之书",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd651ecd5bf8ea3b860d86473b7e916b76.jpg?imageView2/1/w/160/h/220",
    alt: "天之书海报封面",
  },
  {
    text: "猫狗武林",
    cover:
      "//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image/loading_2.e3d934bf.png",
    title:
      "https://p0.pipi.cn/mmdb/25bfd692ddd5bf06d6cbae06048b67a0e810e.jpg?imageView2/1/w/160/h/220",
    alt: "猫狗武林海报封面",
  },
];

/******************** 轮播图 ********************/
console.log("12312");
// usee
onMounted(() => {
  console.log("lunbo");
  var oDiv = document.getElementById("div1");
  var oUl = oDiv.getElementsByTagName("ul")[0];
  var aLi = oUl.getElementsByTagName("li");
  var aA = document.getElementsByTagName("a"); //获取向右向左的箭头
  var timer = null;
  var iSpeed = 10;
  oUl.innerHTML += oUl.innerHTML; //定义图片可以循环播放
  oUl.style.width = aLi.length * aLi[0].offsetWidth + "px"; //定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
  function fnMove() {
    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
      oUl.style.left = 0;
    } else if (oUl.offsetLeft > 0) {
      oUl.style.left = -oUl.offsetWidth / 2 + "px";
    } //定义到边界的时候，实现无缝衔接

    oUl.style.left = oUl.offsetLeft + iSpeed + "px";

    //定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
  }
  timer = setInterval(fnMove, 40);
  aA[0].onclick = function () {
    iSpeed = -10;

    //按下左箭头，定义向左运动
  };
  aA[1].onclick = function () {
    iSpeed = 10;

    //按下右箭头，定义向右运动
  };
  oDiv.onmouseover = function () {
    clearInterval(timer);

    //鼠标移动到图片上，清除定时器，停止运动
  };
  oDiv.onmouseout = function () {
    timer = setInterval(fnMove, 40);

    //鼠标移出，重新开启定时器，重新运动
  };
});
window.onload = function () {};
/******************** 轮播图 ********************/
/******************** 动态添加子元素 ********************/
function taxon() {
  var lis = document.querySelectorAll("#dl >div");
  for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function (e) {
      //简单的排他
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "head1";

      e.stopPropagation();
    };
  }
}

/******************** 动态添加子元素 ********************/
</script>

<style scoped>
/******************** 轮播图 ********************/
* {
  margin: 0;
  padding: 0;
}

#div1 {
  position: relative;
  width: 1190px;
  height: 342px;
  margin: 0 auto 0;
  overflow: hidden;
}

#div1 ul {
  position: absolute;
  left: 0;
}

#div1 ul li {
  list-style: none;
  width: 200px;
  float: left;
  padding: 1px 10px;
  height: 160px;
}

#div1 ul li img {
  width: 100%;
}
/******************** 轮播图 ********************/
body {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
.head {
  width: 1190px;
  height: 45px;
  background-color: #fb3e60;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
  margin-bottom: 1px;
  margin: 0 auto;
}

.head-left {
  display: flex;
  width: 300px;
}
.head-left1 {
  width: 82px;
  font-size: 18px;
  height: 45px;
  line-height: 45px;
  font-weight: 500;
  margin: 0 13px;
}
.head-left2 {
  width: 66px;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
}
/******************** 排他 ********************/
#dl div:first-of-type > dd:after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 37px;
  left: 0;
  right: 0;
  margin: auto;
}
.head1::after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 37px;
  left: 0;
  right: 0;
  margin: auto;
}
.head2::after {
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 2px;
  height: 0;
  top: 37px;
  left: 0;
  right: 0;
  margin: auto;
}
/******************** 排他 ********************/

.head-right {
  width: 66px;
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  position: absolute;
  right: 0;
  top: 0;
}
.body {
  display: flex;
}
.body-div {
  width: 214px;
  height: 300px;
  position: relative;
  margin-left: 10px;
}
.body-title {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.body-title-div {
  position: absolute;
  bottom: 30px;
  font-size: 12px;
  padding-left: 10px;
  text-align: left;
}
.body-title-div span {
  font-size: 16px;
  color: #fd9827;
}

.body-title-div2 {
  font-size: 16px;
  color: #fff;
  position: absolute;
  bottom: 12px;
  display: flex;
}
.body-title-div2-div {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 40px;
  padding-left: 10px;
  text-align: left;
}
.body-title-div2-div2 {
  background-color: #ff4949;
  width: 52px;
  height: 25px;
  border-radius: 20px;
  text-align: center;
}
.button-left {
  font-weight: 700;
  font-size: 70px;
  position: absolute;
  left: 0;
  top: 130px;
}
.button-right {
  font-weight: 700;
  font-size: 70px;
  position: absolute;
  right: 0;
  top: 130px;
}
</style>
